{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2023, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<form data-abide novalidate id="{{formPanelId}}Wizard" class="custom creation">
  <div class="row">
    <div class="medium-6 columns">
      <label for="name">{{tr "Name"}}</label>
      <input type="text" required name="name" id="name" />
    </div>
    <div class="medium-6 columns">
      <dl id="{{formPanelId}}Tabs" class="tabs sunstone-info-tabs text-center right" data-tabs>
        <dd class="tabs-title is-active">
          <a href="#tab-hostsTab">
            <i class="fas fa-hdd"></i><br>{{tr "Hosts"}}
          </a>
        </dd>
        <dd class="tabs-title">
          <a href="#tab-vnetsTab">
            <i class="fas fa-globe"></i><br>{{tr "VNets"}}
          </a>
        </dd>
        <dd class="tabs-title">
          <a href="#tab-datastoresTab">
            <i class="fas fa-folder-open"></i><br>{{tr "Datastores"}}
          </a>
        </dd>
      </dl>
    </div>
  </div>
  <div class="tabs-content" data-tabs-content="{{formPanelId}}Tabs">
    <div id="tab-hostsTab" class="is-active tabs-panel">
      {{{hostsTableHTML}}}
    </div>
    <div id="tab-vnetsTab" class="tabs-panel">
      {{{vnetsTableHTML}}}
    </div>
    <div id="tab-datastoresTab" class="tabs-panel">
      {{{datastoresTableHTML}}}
    </div>
  </div>
</form>
